<template>
  <div>
    <PageTools>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单编号">
          <el-input
            v-model="formInline.orderNo"
            placeholder="请输入"
            clearable
          />
        </el-form-item>
        <el-form-item label="选择日期" prop="Time">
          <el-date-picker
            v-model="Time"
            type="daterange"
            unlink-panels
            range-separator="~"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            placeholder="选择日期"
            value-format="yyyy-MM-dd"
            @change="selectTime"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="orderSearch">查询</el-button>
        </el-form-item>
      </el-form>
    </PageTools>
    <el-card class="main">
      <!-- 表格 -->
      <el-table
        v-loading="loading"
        :data="list"
        style="width: 100%"
        :header-cell-style="{
          fontWeight: 'normal',
          background: '#f3f6fb',
        }"
      >
        <el-table-column type="index" label="序号" width="80" />
        <el-table-column label="订单编号" prop="orderNo" name="orderNo" width="220" />
        <el-table-column label="商品名称" prop="skuName" name="skuName" />
        <el-table-column label="订单金额(元)" prop="amount" name="amount">
          <template #default="{row}">
            {{ row.amount/100 }}
          </template>
        </el-table-column>
        <el-table-column label="设备编号" prop="innerCode" name="innerCode" />
        <el-table-column label="订单状态" prop="status">
          <template #default="{row}">
            {{ statusList[+row.status] }}
          </template>
        </el-table-column>
        <el-table-column label="订单日期" prop="createTime">
          <template #default="{row}">
            {{
              new Date(row.createTime).toLocaleString().replace(/\//g,'.')
            }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button
              type="text"
              size="small"
              @click="detailsFn(row)"
            >查看详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="19">
          <p class="paginationHeader">
            {{
              `共${totalCount}条记录 第${page.pageIndex}/${totalPage}页`
            }}
          </p>
        </el-col>
        <el-col :span="5">
          <el-pagination
            layout="prev, pager, next"
            prev-text="上一页"
            next-text="下一页"
            @current-change="changePage"
          />
        </el-col>
      </el-row>
    </el-card>
    <DetailsFrom :details-visible="detailsVisible" :item="detailsItme" @detailsClose="detailsClose" />
  </div>
</template>

<script>
import DetailsFrom from './component/details-form.vue'
import { getOrdersearch } from '@/api/order'
export default {
  components: {
    DetailsFrom
  },
  data() {
    return {
      loading: false, // 给请求表格数据加一个样式
      Time: '',
      formInline: {
        orderNo: '', // 订单编号
        startDate: '', // 开始时间
        endDate: '' // 结束时间
      },
      list: [], // 表格数据
      page: {
        // 页码
        pageIndex: 1, // 当前页
        pageSize: 10 // 页码显示数据
      },
      totalCount: 0, // 总记录
      totalPage: 0, // 总页数
      // 把订单状态的数据转换成文字
      statusList: {
        0: '创建',
        1: '支付完成',
        2: '出货成功',
        3: '出货失败'
      },
      detailsVisible: false, // 控制订单详情的弹出层
      detailsItme: {}// 把表格对应一行的数据传递给子组件渲染再弹出层
    }
  },
  created() {
    this.getOrdersearch()
  },
  methods: {
    // 1.获取开始时间和结束时间
    selectTime(data) {
      if (data === null) { // 日期选择器改变事件 ~ 解决日期选择器清空 值不清空的问题
        this.formInline.startDate = ''
        this.formInline.endDate = ''
      } else {
        this.formInline.startDate = data[0]
        this.formInline.endDate = data[1]
      }
    },
    // 2.获取数据表格
    async getOrdersearch(searchObj) {
      this.loading = true
      const { data } = await getOrdersearch({ ...this.page, ...searchObj })
      this.list = data.currentPageRecords
      this.loading = false
      this.totalCount = data.totalCount
      this.totalPage = data.totalPage
    },
    // 3.分页可以得到点击下一页的数据重新请求数据
    changePage(val) {
      this.page.pageIndex = val
      this.getOrdersearch()
    },
    // 4.查询表格
    orderSearch() {
      this.getOrdersearch(this.formInline)
    },
    // 5.查看详情的弹出层
    detailsFn(row) {
      this.detailsItme = row
      this.detailsVisible = true
    },
    // 5.1.关闭查看详情的弹出层
    detailsClose() {
      this.detailsVisible = false
    }
  }
}
</script>

<style lang="scss">
.demo-form-inline {
  margin-top: 20px;
  color: #606266;
  font-size: 14px;
  font-weight: normal;
  .el-button--primary {
    background-color: #5f84ff;
    height: 36px;
    padding: 0;
    text-align: center;
    min-width: 80px;
  }
}
.main {
  margin: 20px;
  .paginationHeader {
    font-size: 16px;
    color: #dbdfe5;
    padding-left: 8px;
  }
  .el-pagination {
    padding-left: 22px;
  }
  .el-pagination button:disabled {
    width: 70px;
    height: 32px;
    background-color: #edf0f9;
    margin-right: 16px;
  }
  .el-pagination .btn-next,
  .el-pagination .btn-prev {
    width: 70px;
    height: 32px;
    background-color: #d5ddf8;
  }
  .el-table__row {
    height: 44px;
  }
  .el-table {
    position: unset;
  }
  .el-table thead {
    color: #666666 !important;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 0 !important;
  }
  .el-table--fit {
    margin-top: 10px;
  }
  .el-table td {
    padding: 0px;
  }
}
</style>
